<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .nav-mobile-button {
        position: relative;
        float: left;
        padding: 9px 10px;
        margin-top: 8px;
        margin-right: 15px;
        margin-bottom: 8px;
        background-color: transparent;
        background-image: none;
        border: 1px solid transparent;
        outline: none;
        border-radius: 4px;
    }
    .nav-mobile-button .same:nth-child(1){
        margin-top: 0; 
    }
    .nav-mobile-button .same {
        display: block;
        margin-top: 4px;
        width: 22px;
        height: 2px;
        background: rgb(63, 81, 181);
        border-radius: 1px; 
    }
    .nav-mobile-button .icon-bar1 {
        transform: translate(0,0) rotate(-45deg);
    }
    .nav-mobile-button .icon-bar2 {
        display: none;
    }
    .nav-mobile-button .icon-bar3 {
        transform: translate(0,-250%) rotate(45deg);
    }
    .box{
        width: 400px;
        height: 500px;
        background-color: #eee;
        transform: translate(-400px,0);
    }
    </style>
</head>
<body>
<button class="nav-mobile-button">
    <span id="span1" class="same"></span>
    <span id="span2" class="same"></span>
    <span id="span3" class="same"></span>
</button>
<div class="box">
    
</div>
</body>
<script>
var oSpan1 = document.getElementById('span1'),
    oSpan2 = document.getElementById('span2'),
    oSpan3 = document.getElementById('span3');
var oBtn = document.querySelector(".nav-mobile-button"),
    oBox = document.querySelector(".box");
oBtn.onclick = function() {
    oSpan3.style.cssText = "transform: translate(0,-250%) rotate(45deg);transition: transform 1s;";
    oSpan1.style.cssText = "transform: translate(0,0) rotate(-45deg);transition: transform 1s;margin-top:4px;";
    oSpan2.style.display = "none";
    oBox.style.cssText = "transform: translate(0,0);transition: transform 1s;"
    oBtn.style.cssText = "z-index:1000;right:-48%;transition: right 1s;";
} 
</script>
</html>